<template>
  <el-dialog
    title="索赔受理"
    append-to-body
    width="70%"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div>
      <h5>保函信息</h5>
      <apply-detail :query-id="queryId" class="mb-4"></apply-detail>
      <h5>索赔信息</h5>
      <claim-detail :bus-id="busId"></claim-detail>
      <template v-if="viewMode">
        <h5>审核信息</h5>
        <div class="p-4">
          <div class="row">
            <div class="col-sm-6">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">审核状态：</div>
                <div class="dl-dd">{{ enumhandleStatus[formData.handle_status] }}</div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">审核人：</div>
                <div class="dl-dd">{{ formData.handle_person }}</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">审核时间：</div>
                <div class="dl-dd">{{ formData.handle_time }}</div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">审核意见：</div>
                <div class="dl-dd">{{ formData.handle_option }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <claim-attach :bus-id="busId"></claim-attach>
      <template v-if="!viewMode">
        <h5>审核信息</h5>
        <div class="row p-4">
          <div class="col-sm-12">
            <div class="dl-wrap mb-1">
              <div class="dl-dt">审核意见：</div>
              <div class="dl-dd">
                <el-input
                  placeholder="审核意见"
                  :rows="4"
                  class="input-td"
                  type="textarea"
                  v-model="editData.handle_option"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </template>

      <div class="text-center mt-5" v-if="!viewMode">
        <el-button type="primary" class="btn-long" :loading="submitLoading" @click="onSubmit(true)">
          保存
        </el-button>
        <el-button type="danger" class="btn-long" :loading="submitLoading" @click="onSubmit(false)">
          拒绝
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ApplyDetail from '@/bigcredit/views/letter/claim/components/ApplyDetail'
import ClaimDetail from '@/bigcredit/views/letter/claim/components/ClaimDetail'
import ClaimAttach from '@/bigcredit/views/letter/claim/components/ClaimAttach'
import { mapGetters } from 'vuex'
import { enumhandleStatus } from '@/bigcredit/views/letter/claim/Index'
export default {
  components: {
    ApplyDetail,
    ClaimDetail,
    ClaimAttach,
  },
  props: {
    visible: Boolean,
    viewMode: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    queryId: String,
    busId: String,
  },
  data() {
    return {
      enumhandleStatus,
      submitLoading: false,
      editData: {
        handle_option: '',
      },
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    formData: {
      handler: function (val) {
        Object.keys(this.editData).forEach(key => {
          this.editData[key] = val[key]
        })
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onSubmit(type = true) {
      if (!this.busId) {
        return this.$message.warning('刷新后重试！')
      }
      if (!this.editData.handle_option) {
        return this.$message.warning('请输入审核意见')
      }
      this.submitLoading = true
      this.$api
        .updateData(this.$serviceName, 'guarantee_claim', this.busId, {
          handle_status: type ? 1 : 2,
          handle_person: this.user.realName,
          handle_time: this.$utils.dateFormat(new Date()),
          handle_option: this.editData.handle_option,
        })
        .then(() => {
          this.$message.success(type ? '保存成功' : '索赔已拒绝')
          this.$emit('success', true)
          this.beforeClose()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
